import React from 'react';
import styles from './index.less';
import Konva from 'konva';

// 官网 http://konvajs-doc.bluehymn.com/docs/
// 例子 http://konvajs-doc.bluehymn.com/docs/sandbox/
// 动画教程 http://www.wjhsh.net/le220-p-8391194.html


export default class extends React.Component {
  componentDidMount = () => {
    this.initCanvas();
    this.test();
  };

  // 初始化画布
  initCanvas = () => {
    var width = window.innerWidth;
    var height = window.innerHeight;

    // 创建舞台
    var stage = (this.stage = new Konva.Stage({
      container: '#canvas',
      width: width,       //宽度
      height: height,     //高度
      draggable: true     //设置可拖动
    }));

    // 创建一个图层
    var layer1 = (this.layer1 = new Konva.Layer());
    // 将层添加到舞台
    stage.add(layer1);
  };

  test = () => {
    const { stage, layer1 } = this;
    //矩形
    var rect1 = new Konva.Rect({
      x: 200,
      y: 200,
      width: 500,
      height: 50,
      strokeWidth: 10,   //描边的宽度
      stroke: '#aaa',    //描边的颜色
      cornerRadius: 25,  //圆角
    });
    layer1.add(rect1);


    var rect1 = new Konva.Rect({
      x: 20,
      y: 20,
      width: 100,
      height: 50,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4
    });
    layer1.add(rect1);


    var rect2 = new Konva.Rect({
      x: 150,
      y: 40,
      width: 100,
      height: 50,
      fill: 'red',
      shadowBlur: 10,
      cornerRadius: 10
    });
    layer1.add(rect2);


    var rect3 = new Konva.Rect({
      x: 50,
      y: 120,
      width: 100,
      height: 100,
      fill: 'blue',
      cornerRadius: [0, 10, 20, 30]
    });
    layer1.add(rect3);

    //绘制层
    layer1.draw();
  };

  render() {
    return (
      <div className={styles.container}>
        <div id="canvas" className={styles.canvas}></div>
      </div>
    );
  }
}
